<template>
	<view class="parking-container">
		<!-- 顶部标题栏 -->
		<view class="header animate-fade-in">
			<view class="title">停车预约</view>
			<view class="subtitle">提前预约车位，便捷停车</view>
		</view>

		<!-- 预约表单卡片 -->
		<view class="form-card animate-scale-in">
			<!-- 景点选择 -->
			<view class="form-item">
				<text class="label">选择景点</text>
				<picker @change="onScenicChange" :value="selectedScenicIndex" :range="scenicList" range-key="name">
					<view class="picker-box">
						<text :class="['picker-text', {'animate-fade': pickerChanged.scenic}]">
							{{ selectedScenic ? selectedScenic.name : '请选择景点' }}
						</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 车牌号输入 -->
			<view class="form-item">
				<text class="label">车牌号码</text>
				<view class="plate-type-switch">
					<text 
						:class="['type-btn', { active: !isNewEnergy }]" 
						@tap="isNewEnergy = false"
					>普通车牌</text>
					<text 
						:class="['type-btn', { active: isNewEnergy }]" 
						@tap="isNewEnergy = true"
					>新能源车牌</text>
				</view>
				<view class="plate-number-input">
					<!-- 省份选择 -->
					<picker 
						class="province-picker"
						:value="selectedProvinceIndex" 
						:range="provinces"
						@change="onProvinceChange"
					>
						<view class="plate-section province">
							<text>{{ selectedProvince || '粤' }}</text>
							<uni-icons type="down" size="12" color="#666"></uni-icons>
						</view>
					</picker>
					
					<!-- 城市字母选择 -->
					<picker 
						class="city-picker"
						:value="selectedCityIndex" 
						:range="currentCityLetters"
						@change="onCityLetterChange"
					>
						<view class="plate-section city">
							<text>{{ selectedCityLetter || 'A' }}</text>
							<uni-icons type="down" size="12" color="#666"></uni-icons>
						</view>
					</picker>
					
					<!-- 号码输入 -->
					<input 
						class="plate-section number"
						v-model="plateNumber"
						type="text"
						:placeholder="isNewEnergy ? '请输入6位车牌号' : '请输入5位车牌号'"
						:maxlength="isNewEnergy ? 6 : 5"
						style="text-transform: uppercase;"
						@input="handlePlateInput"
					/>
				</view>
			</view>

			<!-- 日期选择 -->
			<view class="form-item">
				<text class="label">预约日期</text>
				<picker mode="date" :value="selectedDate" :start="startDate" :end="endDate" @change="onDateChange">
					<view class="picker-box">
						<text :class="['picker-text', {'animate-fade': pickerChanged.date}]">
							{{ selectedDate || '请选择日期' }}
						</text>
						<uni-icons type="calendar" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>

			<!-- 时间段选择 -->
			<view class="form-item">
				<text class="label">预约时段</text>
				<view class="time-slot-grid">
					<view 
						v-for="(slot, index) in timeSlots" 
						:key="index"
						:class="['time-slot', { active: selectedTimeSlotIndex === index }]"
						@tap="onTimeSlotTap(index)"
						hover-class="time-slot-hover"
						hover-stay-time="100"
					>
						<view class="time-slot-content">{{ slot }}</view>
						<!-- 修改波纹效果的触发条件 -->
						<view v-if="rippleIndex === index" class="ripple-effect"></view>
					</view>
				</view>
			</view>

			<!-- 停车时长选择 -->
			<view class="form-item">
				<text class="label">停车时长</text>
				<picker :value="selectedDurationIndex" :range="durationOptions" @change="onDurationChange">
					<view class="picker-box">
						<text :class="['picker-text', {'animate-fade': pickerChanged.duration}]">
							{{ durationOptions[selectedDurationIndex] || '请选择时长' }}
						</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</picker>
			</view>
		</view>

		<!-- 提交按钮 -->
		<view class="submit-section animate-slide-in">
			<button 
				class="submit-btn" 
				:disabled="!isFormValid" 
				@tap="submitReservation"
			>
				确认预约
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carNumber: '',
				selectedDate: '',
				selectedTimeSlotIndex: -1,
				selectedDurationIndex: 0,
				timeSlots: [
					'08:00-10:00',
					'10:00-12:00',
					'12:00-14:00',
					'14:00-16:00',
					'16:00-18:00',
					'18:00-20:00'
				],
				durationOptions: ['2小时', '4小时', '6小时', '8小时', '全天'],
				startDate: this.getStartDate(),
				endDate: this.getEndDate(),
				provinces: ['粤', '京', '沪', '津', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陕', '吉', '闽', '贵', '琼', '川', '青', '藏', '宁', '港', '澳', '台'],
				selectedProvinceIndex: 0,
				selectedCityIndex: 0,
				plateNumber: '',
				isNewEnergy: false,
				
				// 各省份对应的城市字母映射
				provinceCityMap: {
					'粤': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
					'京': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q'],
					'沪': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N'],
					// ... 可以继续添加其他省份的城市字母映射
				},
				
				// 景点相关数据
				scenicList: [], // 景点列表
				selectedScenic: null,
				selectedScenicIndex: -1,
				rippleIndex: -1, // 添加用于控制波纹效果的索引
				
				// 添加选择变化标记
				pickerChanged: {
					scenic: false,
					date: false,
					duration: false
				}
			}
		},

		computed: {
			isFormValid() {
				const isPlateValid = this.isNewEnergy ? 
					this.plateNumber.length === 6 : // 新能源车牌需要6位
					this.plateNumber.length === 5    // 普通车牌需要5位
				
				return isPlateValid && 
					   this.selectedDate && 
					   this.selectedTimeSlotIndex !== -1 &&
					   this.selectedScenic !== null  // 添加点选择验证
			},
			selectedProvince() {
				return this.provinces[this.selectedProvinceIndex]
			},
			currentCityLetters() {
				return this.provinceCityMap[this.selectedProvince] || ['A']
			},
			selectedCityLetter() {
				return this.currentCityLetters[this.selectedCityIndex]
			},
			carNumber() {
				return this.selectedProvince + this.selectedCityLetter + this.plateNumber
			}
		},

		methods: {
			// 获取可选开始日期(今天)
			getStartDate() {
				const date = new Date()
				return date.toISOString().split('T')[0]
			},

			// 获取可选结束日期(30天后)
			getEndDate() {
				const date = new Date()
				date.setDate(date.getDate() + 30)
				return date.toISOString().split('T')[0]
			},

			// 日期选择变化
			onDateChange(e) {
				this.selectedDate = e.detail.value
				
				// 触发动画
				this.pickerChanged.date = true
				setTimeout(() => {
					this.pickerChanged.date = false
				}, 500)
				
				this.updateTimeSlots()
			},

			// 时间段选择
			onTimeSlotTap(index) {
				this.selectedTimeSlotIndex = index
				// 触发波纹效果
				this.rippleIndex = index
				// 动画结束后重置
				setTimeout(() => {
					this.rippleIndex = -1
				}, 600) // 与动画持续时间保持一致
			},

			// 时长选择变化
			onDurationChange(e) {
				this.selectedDurationIndex = e.detail.value
				
				// 触发动画
				this.pickerChanged.duration = true
				setTimeout(() => {
					this.pickerChanged.duration = false
				}, 500)
			},

			// 提交预约
			async submitReservation() {
				if (!this.isFormValid) return

				try {
					// TODO: 调用后端API提交预约
					// POST /api/parking/reserve
					// const res = await uni.request({
					//   url: '/api/parking/reserve',
					//   method: 'POST',
					//   data: {
					//     scenicId: this.selectedScenic.id,  // 添加景点ID
					//     carNumber: this.carNumber,
					//     date: this.selectedDate,
					//     timeSlot: this.timeSlots[this.selectedTimeSlotIndex],
					//     duration: this.durationOptions[this.selectedDurationIndex]
					//   }
					// })

					uni.showToast({
						title: '预约成功',
						icon: 'success'
					})

					// 返回上一页
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					uni.showToast({
						title: '预约失败',
						icon: 'none'
					})
				}
			},

			// 省份选择变化
			onProvinceChange(e) {
				this.selectedProvinceIndex = e.detail.value
				this.selectedCityIndex = 0 // 重置城市字母选择
			},

			// 城市字母选择变化
			onCityLetterChange(e) {
				this.selectedCityIndex = e.detail.value
			},

			// 处理车牌号输入
			handlePlateInput(e) {
				// 将输入内容转换为大写
				const value = e.target.value.toUpperCase()
				// 只允许输入字母和数字
				this.plateNumber = value.replace(/[^A-Z0-9]/g, '')
			},

			// 景点选择变化
			async onScenicChange(e) {
				this.selectedScenicIndex = e.detail.value
				this.selectedScenic = this.scenicList[this.selectedScenicIndex]
				
				// 触发动画
				this.pickerChanged.scenic = true
				setTimeout(() => {
					this.pickerChanged.scenic = false
				}, 500) // 动画结束后重置
				
				await this.updateTimeSlots()
			},
			
			// 更新可选时间段
			async updateTimeSlots() {
				this.timeSlots = []
				
				if (!this.selectedScenic || !this.selectedDate) {
					return
				}

				try {
					// TODO: 调用后端API获取景区停车场可预约时间段
					// GET /api/parking/available-slots
					// 请求参数：
					// - scenicId: 景区ID
					// - date: 预约日期
					// const res = await uni.request({
					//   url: '/api/parking/available-slots',
					//   method: 'GET',
					//   data: {
					//     scenicId: this.selectedScenic.id,
					//     date: this.selectedDate
					//   }
					// })
					// this.timeSlots = res.data.timeSlots

					// 示例数据
					this.timeSlots = [
						'08:00-10:00',
						'10:00-12:00',
						'12:00-14:00',
						'14:00-16:00',
						'16:00-18:00',
						'18:00-20:00'
					]
				} catch (error) {
					uni.showToast({
						title: '获取时间段失败',
						icon: 'none'
					})
				}
			},
		},

		// 监听省份变化，重置城市选择
		watch: {
			selectedProvince() {
				this.selectedCityIndex = 0
			}
		},

		// 组件创建时获取景点列表
		async created() {
			try {
				// TODO: 调用后端API获取景点列表
				// GET /api/scenic/list
				// 返回数据格式：
				// {
				//   code: 200,
				//   data: [{
				//     id: number,       // 景区ID
				//     name: string,     // 景区名称
				//     parkingLots: [{   // 停车场信息
				//       id: number,     // 停车场ID
				//       name: string,   // 停车场名称
				//       totalSpaces: number,  // 总车位数
				//       availableSpaces: number  // 可用车位数
				//     }]
				//   }]
				// }
				// const res = await uni.request({
				//   url: '/api/scenic/list',
				//   method: 'GET'
				// })
				// this.scenicList = res.data.data

				// 示例数据
				this.scenicList = [
					{ id: 1, name: '故宫博物院' },
					{ id: 2, name: '颐和园' },
					{ id: 3, name: '天坛公园' }
				]
			} catch (error) {
				uni.showToast({
					title: '获取景点列表失败',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>
	.parking-container {
		padding: 20px;
		background: #f8f8f8;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 28px;
		font-weight: bold;
		color: #333;
	}

	.subtitle {
		font-size: 14px;
		color: #999;
		margin-top: 5px;
	}

	.form-card {
		background: #fff;
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 20px;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		display: block;
		font-size: 14px;
		color: #666;
		margin-bottom: 8px;
	}

	.input {
		width: 100%;
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 12px;
		font-size: 16px;
	}

	.picker-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 0 12px;
		background: #fff;
		transition: all 0.3s ease;
	}

	.picker-box:active {
		background: #f8f8f8;
		border-color: #ff6600;
	}

	.picker-text {
		font-size: 16px;
		color: #333;
		font-weight: normal;
	}

	/* 选择变化时的动画 */
	.animate-fade {
		animation: textFadeIn 0.5s ease-out;
		animation: colorTransition 2s ease-in-out;
	}

	@keyframes textFadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	/* 分离颜色和字重的过渡动画 */
	@keyframes colorTransition {
		0% {
			color: #333;
			font-weight: normal;
		}
		15% {  /* 平滑淡入到高亮 */
			color: #ff6600;
			font-weight: 500;
		}
		60% {  /* 保持高亮状态 */
			color: #ff6600;
			font-weight: 500;
		}
		100% { /* 平滑淡出到普通状态 */
			color: #333;
			font-weight: normal;
		}
	}

	.time-slot-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}

	.time-slot {
		position: relative; /* 为波纹效果添加定位上下文 */
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #666;
		overflow: hidden; /* 控制波纹效果在容器内 */
		transition: all 0.3s ease; /* 添加过渡效果 */
	}

	.time-slot-hover {
		transform: scale(0.95);
		opacity: 0.8;
	}

	.time-slot.active {
		background: #ff6600;
		color: #fff;
		border-color: #ff6600;
		transform: scale(1.02); /* 选中时稍微放大 */
		box-shadow: 0 2px 8px rgba(255, 102, 0, 0.2); /* 添加阴影效果 */
	}

	/* 波纹效果 */
	.ripple-effect {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		animation: ripple 0.6s ease-out;
		pointer-events: none; /* 确保波纹不会影响点击 */
	}

	/* 时间段内容 */
	.time-slot-content {
		position: relative;
		z-index: 1;
	}

	@keyframes ripple {
		0% {
			transform: translate(-50%, -50%) scale(0);
			opacity: 1;
		}
		100% {
			transform: translate(-50%, -50%) scale(2);
			opacity: 0;
		}
	}

	/* 添加选中和未选中状态的过渡动画 */
	.time-slot {
		transform-origin: center;
		will-change: transform, background-color, color, border-color, box-shadow;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
					background-color 0.3s ease,
					color 0.3s ease,
					border-color 0.3s ease,
					box-shadow 0.3s ease;
	}

	/* 悬停效果 */
	.time-slot:not(.active):hover {
		background: #f5f5f5;
		transform: translateY(-1px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.submit-btn {
		width: 100%;
		height: 44px;
		background: #ff6600;
		color: #fff;
		border-radius: 22px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn[disabled] {
		background: #ccc;
	}

	/* 动画效果 */
	.animate-fade-in {
		animation: fadeIn 0.8s ease-out;
	}

	.animate-scale-in {
		animation: scaleIn 0.5s ease-out forwards;
		opacity: 0;
	}

	.animate-slide-in {
		animation: slideIn 0.6s ease-out forwards;
		opacity: 0;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(-20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes scaleIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}
		to {
			opacity: 1;
			transform: scale(1);
		}
	}

	@keyframes slideIn {
		from {
			opacity: 0;
			transform: translateX(-30px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	.plate-number-input {
		display: flex;
		gap: 10px;
		align-items: center;
	}

	.plate-section {
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		background: #fff;
	}

	.province {
		width: 60px;
		padding: 0 8px;
		display: flex;
		justify-content: space-between;
		color: #333;
	}

	.city {
		width: 50px;
		padding: 0 8px;
		display: flex;
		justify-content: space-between;
		color: #333;
	}

	.number {
		flex: 1;
		padding: 0 12px;
		text-transform: uppercase; /* 确保显示为大写 */
	}

	/* 覆盖picker的默认样式 */
	.province-picker, .city-picker {
		width: auto;
	}

	.plate-type-switch {
		display: flex;
		gap: 10px;
		margin-bottom: 10px;
	}

	.type-btn {
		position: relative; /* 为波纹效果添加定位上下文 */
		flex: 1;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border: 1px solid #ddd;
		border-radius: 16px;
		font-size: 14px;
		color: #666;
		background: #fff;
		overflow: hidden; /* 控制波纹效果在容器内 */
		transition: all 0.3s ease;
		cursor: pointer;
	}

	.type-btn:active {
		transform: scale(0.95);
		opacity: 0.8;
	}

	.type-btn.active {
		background: #ff6600;
		color: #fff;
		border-color: #ff6600;
		transform: scale(1.02);
		box-shadow: 0 2px 8px rgba(255, 102, 0, 0.2);
	}

	/* 未选中状态的悬停效果 */
	.type-btn:not(.active):hover {
		background: #f5f5f5;
		transform: translateY(-1px);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	/* 添加波纹效果 */
	.type-btn::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 50%;
		transform: translate(-50%, -50%) scale(0);
		opacity: 0;
		pointer-events: none;
	}

	.type-btn:active::after {
		animation: buttonRipple 0.6s ease-out;
	}

	@keyframes buttonRipple {
		0% {
			transform: translate(-50%, -50%) scale(0);
			opacity: 1;
		}
		100% {
			transform: translate(-50%, -50%) scale(2);
			opacity: 0;
		}
	}
</style>
